<template>
	<view class="settle-container">
		<label class="radio">
			<radio @click="clickAll" :checked="checkAll" color="#c00000" value="" /><text>全选</text>
		</label>
		<view class="totalprice-box">
			合计：<text style="color:#c00000">￥ {{ totalPrice }}</text>
		</view>
		<view class="order-btn">结算（{{ total }}）</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "my-settle",
		computed: {
			...mapGetters('cart', ['total', 'totalPrice', 'checkAll'])
		},
		data() {
			return {

			};
		},
		methods: {
			clickAll() {
				// 全选原本是true就给false，原本是false就全部给true
				// 但是因为改的是vuex里的数据，所以又得封装方法
				this.$store.commit('cart/setAllGoodsChekced', !this.checkAll)
			}
		}
	}
</script>

<style lang="less">
	.settle-container {
		background-color: #fff;
		height: 50px;
		position: fixed;
		border-top: 1rpx solid #dddddd;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.order-btn {

			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #c00000;
			color: #fff;
			text-align: center;
		}
	}
</style>
